<script setup lang="ts">

  useHead({
    title: 'Meet WebGL'
  })

  /**
   * #D25E8F,#49D8BE,#B877D4,#6676B9,#F7890F
   * #84E3F9,#98C4D8,#F9ACA7,#E19DCD,#E6B55E
   */
  const webglNavs: Array<WebGLCardProps> = [
    {
      hash: 'hash0001',
      name: 'WebGL 基础概念',
      route: '/webgl/webgl-fundamentals',
      background: '#D25E8F',
    },
    {
      hash: 'hash0002',
      name: 'WebGL 工作原理',
      route: '/webgl/webgl-how-it-works',
      background: '#49D8BE',
    },
    {
      hash: 'hash0003',
      name: 'WebGL 着色器和GLSL',
      route: '/webgl/webgl-shaders-and-glsl',
      background: '#451644',
    },
  ]

  /**
   * #D25E8F,#49D8BE,#B877D4,#6676B9,#F7890F
   * #84E3F9,#98C4D8,#F9ACA7,#E19DCD,#E6B55E
   */
  const babylonNavs: Array<WebGLCardProps> = [
    {
      hash: 'babylon1010001',
      name: '迈出第一步-让babylon运行起来',
      route: '/babylonjs/first-steps',
      background: '#D25E8F',
    },
    {
      hash: 'babylon1010002',
      name: '了解基本形状物体及其要素',
      route: '/babylonjs/mesh-base-elements',
      background: '#49D8BE',
    },
    {
      hash: 'babylon1010003',
      name: '具有参数化形状的物体',
      route: '/babylonjs/parametric-shapes',
      background: '#451644',
    },
    {
      hash: 'babylon1010004',
      name: '材质-美化你的物体',
      route: '/babylonjs/materials',
      background: '#6676B9',
    },
    {
      hash: 'babylon1010005',
      name: '相机-找一个合适的观察视角',
      route: '/babylonjs/cameras',
      background: '#F7890F',
    },
    {
      hash: 'babylon1010006',
      name: '灯光-学会为物体打光',
      route: '/babylonjs/lights',
      background: '#84E3F9',
    },
    {
      hash: 'babylon1010007',
      name: '动画-让3D元素动起来',
      route: '/babylonjs/animations',
      background: '#98C4D8',
    },
    {
      hash: 'babylon1010008',
      name: '练习——建设一个村庄',
      route: '/babylonjs/build-a-village',
      background: '#F9ACA7',
    },
  ]

</script>

<template>
  <div class="page_index">
    <div class="headers">
      <h1>Hello WebGL</h1>
      <p>WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。</p>
    </div>

    <!-- webgl nav -->
    <div class="navigation-webgl">
      <template v-for="nav in webglNavs" :key="nav.hash">
        <IndexWebGLCard :nav="nav"/>
      </template>
    </div>
    
    <!-- babylon nav -->
    <div class="navigation-babylon">
      <template v-for="nav in babylonNavs" :key="nav.hash">
        <IndexWebGLCard :nav="nav"/>
      </template>
    </div>

  </div>
</template>

<style lang="scss" scoped>
@import url('~/assets/styles/index.scss');
</style>